<template>
  <div id="contractPrint" >
    <table
      bordercolorlight="#000000"
      bordercolordark="#FFFFFF"
      width="100%"
      cellspacing="0"
      cellpadding="2"
      border="1"
    >
      <tbody>
        <tr>
          <td width="95%">
            <table
              bordercolorlight="#000000"
              bordercolordark="#FFFFFF"
              width="100%"
              cellspacing="0"
              cellpadding="3"
              border="1"
            >
              <tbody>
                <tr>
                  <td colspan="2" style="font-size: 24pt; font-weight: bold">
                    <p align="center">湖南罗小黑科技有限公司</p>
                  </td>
                </tr>
                <tr>
                  <td colspan="2">
                    <p align="center">湖南省株洲市天元区88号</p>
                  </td>
                </tr>
                <tr>
                  <td width="65%">电话：0751-888888 传真：0755-83751711转8015</td>
                  <td width="35%">合同单号：{{contract.contractNum}}</td>
                </tr>
                <tr>
                  <td style="font-size: 24pt; font-weight: bold" width="65%">
                    <p align="center">&nbsp;{{contract.classify?contract.classify.name:"销售"}}单</p>
                  </td>
                  <td width="35%">日期：{{contract.signTime | format_date}}</td>
                </tr>
                <tr>
                  <td width="65%">客户名称：{{contract.customer.customerName}}</td>
                  <td width="35%">联系人：{{ hisLinkMan.length!=0?hisLinkMan[0].contactName:"无" }}</td>
                </tr>
                <tr>
                  <td width="65%">客户地址：{{contract.customer.workAddress}}</td>
                  <td width="35%">联系电话：{{ hisLinkMan.length!=0?hisLinkMan[0].contactTel:"无" }}</td>
                </tr>
                <tr>
                  <td colspan="2">
                    <div class="bootstrap-table">
                      <div class="fixed-table-container">
                        <table
                          id="tb_orderDetail"
                          style="word-wrap: break-word; word-break: break-all;LINE-HEIGHT: 150%; WIDTH: 100%; BORDER-COLLAPSE: collapse; EMPTY-CELLS: show; FONT-SIZE: 14px"
                          border="1"
                          cellpadding="3"
                          class="table-s00"
                          width="100%"
                          cellspacing="0"
                        >
                          <thead>
                            <tr>
                              <th style="text-align: left" class="th-inner">
                                <span style="font-family: 楷体">品名</span>
                              </th>
                              <th style="text-align: left" class="th-inner">
                                <span style="font-family: 楷体">品牌</span>
                              </th>
                              <th style="text-align: left" class="th-inner">
                                <span style="font-family: 楷体">规格</span>
                              </th>
                              <th style="text-align: right" class="th-inner">
                                <span style="font-family: 楷体">数量</span>
                              </th>
                              <th style="text-align: right" class="th-inner">
                                <span style="font-family: 楷体">单价</span>
                              </th>
                              <th style="text-align: right" class="th-inner">
                                <span style="font-family: 楷体">金额</span>
                              </th>
                            </tr>
                          </thead>
                          <tr v-for="pro in contract.productList" :key="pro.listId">
                            <td class="text-left">{{ pro.proDetail.product.productName }}</td>
                            <td class="text-left">{{ pro.proDetail.product.productBrand }}</td>
                            <td class="text-left">
                                <span v-for="ab in pro.proDetail.abilities" :key="ab.abilityId">
                                    {{ab.attribute.attrName}}:{{ab.abilityName}}
                                </span>
                            </td>
                            <td class="text-right">{{ pro.proCount }}</td>
                            <td style="white-space: nowrap;" class="text-right">
                              <span style="white-space:nowrap">
                                <span style="font-size:9pt;font-weight:normal;">￥</span>{{pro.discount}}
                              </span>
                            </td>
                            <td style="white-space: nowrap;" class="text-right">
                              <span style="white-space:nowrap">
                                <span style="font-size:9pt;font-weight:normal;">￥</span>{{ pro.proCount*pro.discount }}
                              </span>
                            </td>
                          </tr>
                          <tr>
                            <td colspan="3" class="text-left">
                              <font face="楷体">
                                <b>合计</b>
                              </font>
                            </td>
                            <td style="white-space: nowrap;" class="text-right">{{totalNum}}</td>
                            <td class="text-right">&nbsp;</td>
                            <td style="white-space: nowrap;" class="text-right">
                              <span style="white-space:nowrap">
                                <span style="font-size:9pt;font-weight:normal;">￥</span>{{ contract.totalMoney }}
                              </span>
                            </td>
                          </tr>
                          <tr>
                            <td align="left" colspan="3">
                              <font face="楷体">总计（大写金额）</font>
                            </td>
                            <td align="right" colspan="3">
                              <font face="楷体">{{ contract.totalMoney | toChies}}</font>
                            </td>
                          </tr>
                        </table>
                      </div>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td colspan="2">
                    总金额：
                    <span style="white-space:nowrap">
                      <span style="font-size:9pt;font-weight:normal;">￥</span>{{contract.totalMoney}}
                    </span>
                  </td>
                </tr>
                <tr>
                  <td
                    colspan="2"
                    style="font-size: 10pt; font-family: 楷体"
                  >备注：1.在未付清货款前,以上货物仍属公司所有。&nbsp;2.顾客订货需要交纳预付款,在公司交货或顾客提货时,必须付清全部货款。</td>
                </tr>
                <tr>
                  <td colspan="2">业务员：{{contract.empSigner.empName}} 客户签收：{{ contract.customerSigner }}</td>
                </tr>
              </tbody>
            </table>
          </td>
          <td style="font-size: 10pt" width="30">
            <p align="center">
              ①
              <br />存
              <br />根
              <br />(白)
              <br />
              <br />②
              <br />客
              <br />户
              <br />(红)
              <br />
              <br />③
              <br />财
              <br />务
              <br />(黄)
              <br />
              <br />④
              <br />仓
              <br />库
              <br />(绿)
            </p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
export default {
    name:"contractPrint",
    props:['contract'],
    data(){
        return{
            hisLinkMan:[] // 联系人
        }
    },
    computed:{
        totalNum(){
            let total = 0
            this.contract.productList.forEach(pl => {
                total += pl.proCount
            })
            return total
        }
    },
    created(){
        this.axios.get("api/customer/hisLinkMan",{params:{"customerId":this.contract.customer.customerId}})
        .then(res => {
            this.hisLinkMan = res.data
        })
        .catch(err => {
            console.error(err); 
        })
    },
    filters:{
        toChies: function(amount) { //形参
                // 汉字的数字
                const cnNums = ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"];
                // 基本单位
                const cnIntRadice = ["", "拾", "佰", "仟"];
                // 对应整数部分扩展单位
                const cnIntUnits = ["", "万", "亿", "兆"];
                // 对应小数部分单位
                const cnDecUnits = ["角", "分"];
                // 整数金额时后面跟的字符
                const cnInteger = "整";
                // 整型完以后的单位
                const cnIntLast = "元";
                // 最大处理的数字
                const maxNum = 9999999999999999.99;
                // 金额整数部分
                let integerNum;
                // 金额小数部分
                let decimalNum;
                // 输出的中文金额字符串
                let chineseStr = "";
                // 分离金额后用的数组，预定义
                let parts;
                if (amount === "") {
                    return "";
                }
                amount = parseFloat(amount);
                if (amount >= maxNum) {
                    // 超出最大处理数字
                    return "";
                }
                if (amount === 0) {
                    chineseStr = cnNums[0] + cnIntLast + cnInteger;
                    return chineseStr;
                }
                // 转换为字符串
                amount = amount.toString();
                if (amount.indexOf(".") === -1) {
                    integerNum = amount;

                    decimalNum = "";
                } else {
                    parts = amount.split(".");
                    integerNum = parts[0];
                    decimalNum = parts[1].substr(0, 4);
                }
                // 获取整型部分转换
                if (parseInt(integerNum, 10) > 0) {
                    let zeroCount = 0;
                    const IntLen = integerNum.length;
                    for (let i = 0; i < IntLen; i++) {
                        const n = integerNum.substr(i, 1);
                        const p = IntLen - i - 1;
                        const q = p / 4;
                        const m = p % 4;
                        if (n === "0") {
                            zeroCount++;
                        } else {
                            if (zeroCount > 0) {
                                chineseStr += cnNums[0];
                            }
                            // 归零
                            zeroCount = 0;
                            //alert(cnNums[parseInt(n)])
                            chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
                        }
                        if (m === 0 && zeroCount < 4) {
                            chineseStr += cnIntUnits[q];
                        }
                    }
                    chineseStr += cnIntLast;
                }
                // 小数部分
                if (decimalNum !== "") {
                    const decLen = decimalNum.length;
                    for (let i = 0; i < decLen; i++) {
                        const n = decimalNum.substr(i, 1);
                        if (n !== "0") {
                            chineseStr += cnNums[Number(n)] + cnDecUnits[i];
                        }
                    }
                }
                if (chineseStr === "") {
                    chineseStr += cnNums[0] + cnIntLast + cnInteger;
                } else if (decimalNum === "") {
                    chineseStr += cnInteger;
                }
                return chineseStr;
            }
    }
}
</script>
<style scoped>
.text-right{text-align: right;}
.text-left{text-align: left;}
</style>